<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>百度地图</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      /* CSS3 高级用法 - 变量定义 */
      --headerHeight: 45px;
    }

    .header {
      /* CSS3 高级用法 - 变量使用 */
      height: var(--headerHeight);
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #8BC34A;
      color: #fff;
    }

    /* 有宽度(块级)，高度的盒子 */
    #container {
      width: 100vw;
      /* CSS3 高级用法 - calc 计算 */
      height: calc(100vh - var(--headerHeight));
    }

    .map_circle {
      width: 100px;
      height: 100px;
      background-color: #24BC79;
      border: 5px solid #fff;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }

    .map_rect {
      background-color: #24BC79;
      color: #fff;
      padding: 2px 5px;
    }
  </style>
  <!-- 引入百度地图的在线 JS-SDK  -->
  <script src="http://api.map.baidu.com/api?v=2.0&ak=isS7SwIUMx25en8CNxbsbHbQsmaEZB4f">
  //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
  </script>
</head>

<body>
  <header class="header">头部</header>
  <div id="container"></div>
  <!-- 例子 JS 代码 -->
  <script>
    // 创建地图实例  
    const map = new BMap.Map("container");
    // 缩放级别 1-19 级
    map.centerAndZoom('广州黑马程序员', 19);
    /* ================== 百度地图事件绑定 ================== */
    // 百度地图API事件是独立的，与标准DOM事件不同，事件对象也是不同的。
    let labelZIndex = 0;
    // 文本覆盖物坐标位置
    const opts = {
      // 指定文本标注所在的地理位置
      position: new BMap.Point(113.43456, 23.135286),
      // 设置文本偏移量，偏移宽高的一半就是居中
      offset: new BMap.Size(-50, -50)
    };
    // 创建文本覆盖物，通过覆盖物内的 div 控制样式，切换类名即可切换样式
    const label = new BMap.Label('<div class="map_circle">黑马程序员</div>', opts);
    // 清除文本覆盖物原本的默认样式
    label.setStyle({ backgroundColor: 'transparent' });
    // 把覆盖物添加到地图中
    map.addOverlay(label);

    // 可以直接给覆盖物绑定事件
    label.addEventListener('click', (e) => {
      const { clientX, clientY } = e.changedTouches[0]
      console.log('你点击了覆盖物', e);
      label.setZIndex(++labelZIndex);
      // 把点击的位置移动到屏幕中心的公式
      const x = window.screen.width / 2 - clientX;
      const y = window.screen.height / 2 - clientY;
      // 根据坐标移动地图
      map.panBy(x, y);
      console.log(labelZIndex);
    });

    {
      // 文本覆盖物坐标位置
      const opts = {
        // 指定文本标注所在的地理位置
        position: new BMap.Point(113.43456, 23.135286),
        // 设置文本偏移量，偏移宽高的一半就是居中
        offset: new BMap.Size(0, 0)
      };
      // 创建文本覆盖物，通过覆盖物内的 div 控制样式，切换类名即可切换样式
      const label = new BMap.Label('<div class="map_circle">黑马程序员2</div>', opts);
      // 清除文本覆盖物原本的默认样式
      label.setStyle({ backgroundColor: 'transparent' });
      // 把覆盖物添加到地图中
      map.addOverlay(label);

      // 可以直接给覆盖物绑定事件
      label.addEventListener('click', (e) => {
        const { clientX, clientY } = e.changedTouches[0]
        console.log('你点击了覆盖物', e);
        label.setZIndex(++labelZIndex);
        // 把点击的位置移动到屏幕中心的公式
        const x = window.screen.width / 2 - clientX;
        const y = window.screen.height / 2 - clientY;
        // 根据坐标移动地图
        map.panBy(x, y);
        console.log(labelZIndex);
      });
    }
  </script>
</body>

</html>